<!--通知内容列表-->
<template>
  <div class="notificationlist">
    <van-tabs swipeable background="#704485" color="#fff" :ellipsis="false">
      <van-tab v-for="(item,index) in noticeList" :key="index" :name="item.key">
        <div slot="title" class="notice-title" @click="tabClick(item)">
          <span>{{item.name}}</span>
          <i class="notice-nums" :class="{'show-nums': item.isNewsNums>0}">{{item.isNewsNums || ''}}</i>
        </div>
      </van-tab>
    </van-tabs>
    <div v-for="(item,index) in noticeInfo" :key="index">
      <van-row class="info-wrap" @click="JumpContent">
        <van-col span="24">
          <!-- <div class="content font28" :class="item.isNews ==0?'is-news':'old-news'">{{item.content}}</div> -->
          <p :class="{'news-label': item.isNews == 0}" class="font28 title">{{item.title}}</p>
          <p class="font20 news-content">{{item.content}}</p>
          <p class="font20" style="color: #939393">
            <label>部门：</label>
            {{item.bm}}
            <label>时间：</label>
            <time>{{item.date}}</time>
          </p>
        </van-col>
      </van-row>
    </div>
    <div class="pagination">
      <van-button @click="pagChange('index')" color="#704485" size="small">首页</van-button>
      <van-button @click="pagChange('prev')" color="#8B828E" size="small">上一页</van-button>
      <van-button @click="pagChange('next')" color="#8B828E" size="small">下一页</van-button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      noticeList: [
        {
          name: "办公通知",
          key: "tab1",
          isNewsNums: 2
        },
        {
          name: "教学通知",
          key: "tab2",
          isNewsNums: 0
        },
        {
          name: "科研通知",
          key: "tab3",
          isNewsNums: 6
        },
        {
          name: "学工通知",
          key: "tab4"
        }
      ],

      noticeInfo: [
        {
          id: 1,
          title: "关于我校2017-2018年<本科教学质量报告本科教学质量报告>",
          content: "[科技处1]关于推荐申报2017年度华夏建设科学 技术奖的通知",
          date: "07-02",
          bm: "教务处",
          isNews: 0 // 最新未读 0未读  1已读
        },
        {
          id: 2,
          title: "关于我校2017-2018年<本科教学质量报告本科教学质量报告>",
          content: "[人事处]关于推荐申报2017年度华夏建设科学 技术奖的通知",
          date: "07-02",
          bm: "教务处",
          isNews: 1 // 最新未读
        },
        {
          id: 3,
          title: "关于我校2017-2018年<本科教学质量报告本科教学质量报告>",
          content: "[科技处]关于推荐申报2017年度华夏建设科学 技术奖的通知技术奖的通知",
          date: "07-03",
          bm: "教务处",
          isNews: 0 // 最新未读
        },
        {
          id: 4,
          title: "关于我校2017-2018年<本科教学质量报告本科教学质量报告>",
          content: "[人事处]关于推荐申报2017年度华夏建设科学 技术奖的通知",
          date: "07-04",
          bm: "教务处",
          isNews: 0 // 最新未读
        },
        {
          id: 4,
          title: "关于我校2017-2018年<本科教学质量报告本科教学质量报告>",
          content: "[人事处]关于推荐申报2017年度华夏建设科学 技术奖的通知",
          date: "07-04",
          bm: "教务处",
          isNews: 0 // 最新未读
        }
      ],
      currentPage: 1
    };
  },
  methods: {
    // 切换数据
    tabClick(item) {},
    //分页
    pagChange(key) {},
    //跳转正文
    JumpContent() {
      this.$router.push({
        path: "content"
      });
    }
  }
};
</script>
<style lang="less" scoped>
.notificationlist {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  .notice-title {
    span {
      color: #f2f2f2;
      position: relative;
    }
    .notice-nums {
      position: absolute;
      display: inline-block;
      width: 17px;
      height: 17px;
      line-height: 17px;
      right: 0;
      top: 13px;
      color: #fff;
      border-radius: 50%;
      &.show-nums {
        background-color: #ffffff;
        color: #62556c;
      }
    }
  }

  .info-wrap {
    padding: 3px;
    border-bottom: 1px solid #EEEEEE;
    p {
      margin: 3px;
    }
    .title {
      font-weight: 600;
      overflow: hidden;
      width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 24px;
      line-height: 24px;
      position: relative;
    }
    .news-content {
      color: #939393;
      overflow: hidden;
      width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top:5px; 
      margin-bottom:5px; 
    }
  }

  .pagination {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    .van-button__text {
      color: #fff;
    }
  }
}
// 最新标签
.news-label {
  &::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    width: 24px;
    height: 24px;
    background: url("../../../assets/images/info-news.png") no-repeat;
    background-size: 100% 100%;
  }
}
</style>